<template>
  <div class="app-container">
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="所属公司">
        <el-select v-model="formInline.gongsiSel" @change="initData" placeholder="所属公司">
          <el-option v-for="val in gongsiList" :key="val.id" :label="val.name" :value="val.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="订单生成日期区间">
        <el-date-picker
          v-model="formInline.allDate"
          type="daterange"
          @change="dateChange"
          value-format="yyyy-MM-dd"
          range-separator="至"
          start-placeholder="订单生成日期"
          end-placeholder="订单生成日期">
        </el-date-picker>
      </el-form-item>
      <!-- <el-form-item label="订单货柜关联设备号">
        <el-input v-model="formInline.orderNumId" placeholder="订单货柜关联设备号"></el-input>
      </el-form-item> -->
      <el-form-item label="订单状态">
        <el-select v-model="formInline.status" @change="initData" placeholder="订单状态">
          <el-option v-for="val in $store.state.user.orderStatus" :key="val.value" :label="val.name" :value="val.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="check">查询</el-button>
      </el-form-item>
    </el-form>
    <el-button type="primary" icon="el-icon-download" @click="handleExport">
      导出
    </el-button>
    <el-button icon="el-icon-refresh" @click="handleReset">
      重置
    </el-button>

    <el-table :data="dataList" style="width: 100%;margin-top:30px;" border>
      <!-- <el-table-column align="center" label="Role Key">
        <template slot-scope="scope">
          {{ scope.row.key }}
        </template>
      </el-table-column> -->
      <el-table-column align="center" prop="name" label="订单编号">
        <template slot-scope="scope">
          {{ scope.row.id }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="设备序列号">
        <template slot-scope="scope">
          {{ scope.row.orderSn }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="顾客手机号码">
        <template slot-scope="scope">
          {{ scope.row.customerAccount }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="订单实际金额">
        <template slot-scope="scope">
          {{ scope.row.realAmount }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="支付渠道">
        <template slot-scope="scope">
          {{ $store.state.user.sourceList[scope.row.source].name }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="订单状态">
        <template slot-scope="scope">
          {{ $store.state.user.orderStatus[Number(scope.row.status)].name }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="创建时间">
        <template slot-scope="scope">
          {{ timeChange(scope.row.created) }}
        </template>
      </el-table-column>
      <el-table-column align="center" fixed="right" label="操作" width="160">
        <template slot-scope="scope">
          <div>
            <el-button type="primary" size="small" @click="handleEdit(scope)">
              详情
            </el-button>
            <!-- <el-button type="primary" size="small" @click="proCancle">
              取消
            </el-button> -->
          </div>
          <div style="margin-top: 10px;">
            <el-button type="primary" size="small" @click="probukou(scope)">
              补扣
            </el-button>
            <el-button type="primary" size="small" @click="proreturn(scope)">
              退款
            </el-button>
            <!-- <el-button type="primary" size="small" @click="handleOverlock(scope)">
              忽略
            </el-button> -->
          </div>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog v-if="dialogVisible" :visible.sync="dialogVisible" title="详情">
        <el-card class="box-card" :body-style="{textAlign:'center'}" shadow="never">
          <span>订单状态：</span>
          <span>{{$store.state.user.orderStatus[role.status].name}}</span>
        </el-card>
        <el-card class="box-card" style="margin-top:20px;" :body-style="{textAlign:'center'}" shadow="never">
          <div class="order-card">
            <div>
              <div>
                <div>订单所属公司：</div>
                <div>{{role.tenantName}}</div>
              </div>
              <div>
                <div>订单编号：</div>
                <div>{{role.orderSn}}</div>
              </div>
            </div>
            <div>
              <div>
                <div>订单创建时间：</div>
                <div>{{role.created}}</div>
              </div>
              <div>
                <div>订单最近修改时间：</div>
                <div>{{role.modified}}</div>
              </div>
            </div>
            <div>
              <div>
                <div>订单原始总金额：</div>
                <div>{{role.originAmount}}</div>
              </div>
              <div>
                <div>订单成本价格：</div>
                <div>{{role.totalCost}}</div>
              </div>
            </div>
            <div>
              <div>
                <div>订单顾客手机号：</div>
                <div>{{role.customerAccount}}</div>
              </div>
              <div>
                <div>订单商品总数：</div>
                <div>{{role.skuCount}}</div>
              </div>
            </div>
            <div>
              <div>
                <div>订单折扣：</div>
                <div>{{role.discountAmount}}</div>
              </div>
              <div>
                <div>订单成本价格：</div>
                <div>{{role.totalCost}}</div>
              </div>
            </div>
            <div>
              <div>
                <div>支付金额：</div>
                <div>{{role.paidAmount}}</div>
              </div>
              <div>
                <div>支付流水号：</div>
                <div>{{role.paymentSn}}</div>
              </div>
            </div>
            <div>
              <div>
                <div>退款金额：</div>
                <div>{{role.repaidAmount}}</div>
              </div>
              <div>
                <div>退款流水号：</div>
                <div>{{role.repaidSn}}</div>
              </div>
            </div>
            <div>
              <div>
                <div>补扣金额：</div>
                <div>{{role.deductAmount}}</div>
              </div>
              <div>
                <div>补扣流水号：</div>
                <div>{{role.deductSn}}</div>
              </div>
            </div>
          </div>
        </el-card>
        <el-card class="box-card" style="margin-top:20px;" :body-style="{textAlign:'center'}" shadow="never">
          设备信息
        </el-card>
        <el-card class="box-card" style="margin-top:20px;" :body-style="{textAlign:'center'}" shadow="never">
          <div class="order-card">
            <div>
              <div>
                <div>设备名称：</div>
                <div>{{role.deviceInfo.deviceName}}</div>
              </div>
              <div>
                <div>设备序列号：</div>
                <div>{{role.deviceInfo.deviceSn}}</div>
              </div>
            </div>
            <div>
              <div>
                <div>设备点位：</div>
                <div>{{role.deviceInfo.location}}</div>
              </div>
              <div>
                <div>归属地：</div>
                <div>{{role.deviceInfo.province+role.deviceInfo.city+role.deviceInfo.region}}</div>
              </div>
            </div>
            <div>
              <div>
                <div>设备责任人：</div>
                <div>{{role.deviceInfo.ownerName}}</div>
              </div>
              <div>
                <div>设备所属公司：</div>
                <div>{{role.deviceInfo.tenantName}}</div>
              </div>
            </div>
          </div>
        </el-card>
        
        <el-card class="box-card" style="margin-top:20px;" :body-style="{textAlign:'center'}" shadow="never">
          商品信息
        </el-card>
        <el-card class="box-card" style="margin-top:20px;" :body-style="{textAlign:'center'}" shadow="never" v-for="(val,index) in role.skuInfos" :key="index">
          <div class="order-card1">
            <div>
              <div>
                <div>商品名称：</div>
                <div>{{val.skuName}}</div>
              </div>
              <div>
                <div>商品条码：</div>
                <div>{{val.skuBarcode}}</div>
              </div>
              <div>
                <div>商品单价：</div>
                <div>{{val.skuPrice}}</div>
              </div>
              <div>
                <div>商品折扣：</div>
                <div>{{val.skuDiscount}}</div>
              </div>
              <div>
                <div>商品数量：</div>
                <div>{{val.skuCount}}</div>
              </div>
            </div>
          </div>
        </el-card>
      
      <div style="text-align:right;margin-top: 20px;">
        <el-button type="danger" @click="dialogVisible=false">
          取消
        </el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="showBukou" :title="dialogFillBuckle == 'bukou'?'商品补扣':'商品退款'">
      <!-- <el-form :model="role" :rules="rules" label-width="160px" label-position="left">
        <el-form-item label="订单编号">
          <el-input v-model="role.orderNumId" disabled placeholder="订单编号"></el-input>
        </el-form-item>
      </el-form>
      <el-form :model="role" :rules="rules" label-width="160px" label-position="left">
        <el-form-item label="货柜设备号">
          <el-input v-model="role.orderNumId" disabled placeholder="订单编号"></el-input>
        </el-form-item>
      </el-form> -->
      <el-form :model="role" :rules="rules" label-width="160px" label-position="left">
        <el-form-item :label="dialogFillBuckle == 'bukou'?'补扣金额':'退款金额'">
          <el-input v-model="orderNum" type="number" :placeholder="dialogFillBuckle == 'bukou'?'补扣金额':'退款金额'"></el-input>
        </el-form-item>
      </el-form>
      <div style="text-align:right;">
        <el-button type="danger" @click="showBukou=false">
          取消
        </el-button>
        <el-button type="primary" @click="confirmRole">
          确定
        </el-button>
      </div>
    </el-dialog>
    <Pagination :total="total" :page="page+1" @pagination="pagination" />
  </div>
</template>

<script>
import path from 'path'
import { deepClone } from '@/utils'
import { getRoutes, getRoles, addRole, deleteRole, updateRole } from '@/api/role'
import { postCustomerFind, postOrderFind, postOrderDeduct, postOrderRefund, postOrderStatus, postOrder, getOrder, putOrder } from '@/api/Order'
import Pagination from '@/components/Pagination/index'
import i18n from '@/lang'

const defaultRole = {
  id: '',
  name: '',
  address: '',
  phone:'',
  status: 0,
  adminName:'',
  routes: []
}

export default {
  data() {
    return {
      gongsiList:[],
      showBukou: false,
      editshow: false,
      role: Object.assign({}, defaultRole),
      routes: [],
      dataList: [],
      dialogVisible: false,
      dialogFillBuckle: false,
      dialogRefund: false,
      dialogType: 'new',
      checkStrictly: false,
      defaultProps: {
        children: 'children',
        label: 'title'
      },
      rules: {
        name: [
          { required: true, message: '请输入分公司名称' },
        ],
        address: [
          { required: false, message: '请输入公司地址' },
        ],
        phone: [
          { required: false, message: '请输入联系方式' },
        ],
        phone: [
          { required: false, message: '请输入联系方式' },
        ],
      },
      options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }],
      orderList: [],
      total: 0,
      page: 0,
      formInline: {
        gongsiSel: "",
        allDate:'',
        status: ''
      },
      orderSn:'',
      orderNum:''
    }
  },
  computed: {
    routesData() {
      return this.routes
    }
  },
  components: { Pagination },
  created() {
    this.gongsiList = JSON.parse(localStorage.getItem('companyList'));
    this.formInline.gongsiSel = this.gongsiList[0].id;
    this.initData();
  },
  methods: {
    dateChange(data){
      this.initData();
    },
    //列表
    initData(){
      console.log(this.page)
      var data = {
        "pageCount": 10,
        "page": this.page,
        "searchCriteria": {
          "tenantId": this.formInline.gongsiSel,
          "startTime": this.formInline.allDate?formInline.allDate[0]:'',
          "endTime": this.formInline.allDate?formInline.allDate[1]:'',
          "status": this.formInline.status,
          // "payment": this.formInline.status,
        }
      };
      if(data.searchCriteria.status == ''){
        delete data.searchCriteria.status;
      }
      if(data.searchCriteria.startTime == ''){
        delete data.searchCriteria.startTime;
      }
      if(data.searchCriteria.endTime == ''){
        delete data.searchCriteria.endTime;
      }
      postOrderFind(data).then((res)=>{
        console.log(res)
        this.dataList = res.result.orders;
        this.total = res.result.totalCount;
        console.log(this.total)
      })
    },
    //时间格式转化
    timeChange(UTCDateString) {
      if (!UTCDateString) {
        return '-';
      }
      function formatFunc(str) {
        return str > 9 ? str : '0' + str
      }
      var date2 = new Date(UTCDateString);
      console.log('时间', date2)
      var year = date2.getFullYear();
      var mon = formatFunc(date2.getMonth() + 1);
      var day = formatFunc(date2.getDate());
      var hour = date2.getHours();
      var noon = hour >= 12 ? 'PM' : 'AM'; // 判断是上午还是下午
      hour = hour >= 12 ? hour - 12 : hour; // 12小时制
      hour = formatFunc(hour);
      var min = formatFunc(date2.getMinutes());
      var sec = formatFunc(date2.getSeconds());
      var dateStr = year + '-' + mon + '-' + day + ' ' + hour + ':' + min + ':' + sec;
      return dateStr;
    },
    //导出
    handleExport(){

    },
    //重置
    handleReset(){
      this.formInline = {
        gongsiSel: this.gongsiList[0].id,
        allDate:'',
        status: ''
      };
      this.initData();
    },
    //过滤查询
    check(){
      this.initData();
    },
    //分页
    pagination(data) {
      console.log(data)
      this.page = data.page-1;
      this.initData();
    },
    probukou(scope){
      console.log(scope)
      this.orderSn = scope.row.orderSn;
      this.showBukou = true;
      this.dialogFillBuckle = 'bukou';
    },
    proreturn(scope){
      console.log(scope)
      this.orderSn = scope.row.orderSn;
      this.showBukou = true;
      this.dialogFillBuckle = 'return';
    },
    handleEdit(scope) {
      this.dialogType = 'edit'
      this.dialogVisible = true
      getOrder(scope.row.orderSn).then((res)=>{
        this.role = deepClone(res.result)
      })
    },
    async confirmRole() {
      var str = '';
      if(this.dialogFillBuckle == 'return'){
        str = {repaidSn: this.orderNum}
      }
      if(this.dialogFillBuckle == 'bukou'){
        str = {deductSn: this.orderNum}
      }
      postOrderRefund(this.orderSn,str).then((res)=>{
        this.showBukou = false;
        this.$message({
          type: 'success',
          message: '操作成功!'
        })
      })
      this.dialogVisible = false
    },
  }
}
</script>

<style lang="scss" scoped>
.order-card{
  border: 1px solid #e6ebf5;
  border-radius:4px;
  >div{
    display: flex;
    >div{
      display: flex;
      width: 50%;
      padding: 20px;
      border-bottom: 1px solid #e6ebf5;
    }
    >div:nth-child(1){
      border-right: 1px solid #e6ebf5;
    }
  }
}
.order-card1{
  border: 1px solid #e6ebf5;
  border-radius:4px;
  >div{
    display: flex;
    justify-content: space-between;
    >div{
      display: flex;
      padding: 20px;
      border-bottom: 1px solid #e6ebf5;
    }
  }
}
.order-card-line{
  border: 1px solid #e6ebf5;
  border-radius:4px;
  padding: 20px;
  margin-top: 20px;
  text-align: center;
}
.app-container {
  .roles-table {
    margin-top: 30px;
  }
  .permission-tree {
    margin-bottom: 30px;
  }
}
</style>
